<template>
  <div class="allTab">
    <a-tabs default-active-key="1" @change="handleClick">
      <a-tab-pane key="1" tab="草稿">
        <draft></draft>
      </a-tab-pane>
      <a-tab-pane key="2" tab="报价中" force-render>
        <offer></offer>
      </a-tab-pane>
      <a-tab-pane key="3" tab="核价中">
        <pricing></pricing>
      </a-tab-pane>
      <a-tab-pane key="4" tab="已核价" force-render>
        <approved-price></approved-price>
      </a-tab-pane>
      <a-tab-pane key="5" tab="已下单">
        <order></order>
      </a-tab-pane>
      <a-tab-pane key="6" tab="已过期">
        <overdue></overdue>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabs } from "ant-design-vue";
Vue.use(Tabs);
import offer from "../buyersview/offer";
import pricing from "../buyersview/pricing";
import draft from "../buyersview/draft";
import ApprovedPrice from "../buyersview/ApprovedPrice";
import order from "../buyersview/order";
import overdue from "../buyersview/overdue";
export default {
  components: {
    offer,
    pricing,
    draft,
    ApprovedPrice,
    order,
    overdue,
  },
  data() {
    return {
      one: 1,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang='less'>
.allTab {
  width: calc(100% - 195px);
  // width: 100%;
  height: 100%;

  .ant-tabs-nav-scroll {
    background-color: white;
  }
  .ant-tabs {
    width: 100%;
    height: 100%;

    .ant-tabs-content {
      // width: 130%;
      height: calc(100% - 60px);
      .ant-tabs-tabpane {
        height: 100%;
      }
    }
  }
}
</style>
 
